<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
  <title>250106-响应式布局</title>

  <!-- 引入bootstrap样式 -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css">

  <!-- 引入wow.js样式 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css">

  <!-- 引入重置样式 -->
  <link rel="stylesheet/less" href="./assets/css/reset.less">

  <!-- 引入页面样式 -->
  <link rel="stylesheet/less" href="./assets/css/index.less">
</head>

<body>
  <!-- 头部导航 -->
  <nav class="header navbar navbar-default">
    <div class="container">
      <!-- 左边Logo -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand logo wow bounceInDown">
          <img src="./assets/images/logo.png" alt="">
        </div>
      </div>

      <!-- 导航 -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <li><a href="#home" class="wow bounceInDown">home</a></li>
          <li><a href="#snowboards" class="wow bounceInDown" data-wow-delay="0.1s">snowboards</a></li>
          <li><a href="#snowboarding" class="wow bounceInDown" data-wow-delay="0.2s">snowboarding</a></li>
          <li><a href="#features" class="wow bounceInDown" data-wow-delay="0.3s">features</a></li>
          <li><a href="#contact" class="wow bounceInDown" data-wow-delay="0.4s">contact</a></li>
          <!-- <li><a href="#contact" class="wow bounceInDown" data-wow-delay="0.5s">contact</a></li> -->
        </ul>
      </div>

      <div class="head-right">
        <a href="javascript:void(0)" class="wow bounceInDown" data-wow-delay="0.6s">
          <span class="glyphicon glyphicon-search"></span>
        </a>
        <a href="javascript:void(0)" class="wow bounceInDown" data-wow-delay="0.7s">
          <span class="glyphicon glyphicon-lock"></span>
          €0
        </a>
      </div>
  </nav>

  <!-- home -->
  <div class="home" id="home">
    <div class="box">
      <img src="./assets/images/bg1.png" alt="">
      <div class="text">
        <div class="subject wow zoomIn">run over everything</div>
        <div class="details wow zoomIn" data-wow-delay="0.5s">see details</div>
      </div>
    </div>
  </div>

  <!-- snowboards -->
  <div class="snowboards" id="snowboards">
    <div class="subject wow bounceInDown">snowboards</div>
    <p class="top-desc wow bounceInDown" data-wow-delay="0.2s">Aliquam erat volutpat. Curabitur ut consequat arcu eget
      laoreet est</p>
    <div class="icon wow bounceInDown" data-wow-delay="0.3s">
      <img src="./assets/images/cha.png" alt="">
    </div>
    <div class="photo">
      <div class="item wow bounceInDown" data-wow-delay="0.4s">
        <img src="./assets/images/skateboard1.png" alt="">
      </div>
      <div class="item wow bounceInDown" data-wow-delay="0.5s">
        <img src="./assets/images/skateboard2.png" alt="">
      </div>
      <div class="item wow bounceInDown" data-wow-delay="0.6s">
        <img src="./assets/images/skateboard3.png" alt="">
      </div>
      <div class="item wow bounceInDown" data-wow-delay="0.7s">
        <img src="./assets/images/skateboard4.png" alt="">
      </div>
      <div class="item wow bounceInDown" data-wow-delay="0.8s">
        <img src="./assets/images/skateboard5.png" alt="">
      </div>
    </div>
    <div class="foot-desc wow bounceInDown" data-wow-delay="0.9s">Snowboard extreme Series</div>
  </div>

  <!-- snowboarding -->
  <div class="snowboarding" id="snowboarding">
    <img src="./assets/images/bg2.jpg" alt="" class="bgImg">
    <div class="text">
      <div class="subject wow zoomIn">The Mountains Snowboarding ®</div>
      <p class="desc1 wow zoomIn" data-wow-delay="0.2s">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec tincidunt auctor facilisis. Nam massa dui, imperdiet
        et mi ut, sagittis viverra odio. Duis et lectus eu enim
        gravida vulputate nec eget nisi. Nunc ultrices velit blandit,
        dapibus lacus in, feugiat erat. Donec non porttitor augue,
        sit amet lacinia purus. Nulla fringilla quam est, luctus
        dapibus odio suscipit ut. Vivamus et lectus a nunc fringilla
        volutpat. Morbi sed congue sem.
      </p>
      <p class="desc2 wow zoomIn" data-wow-delay="0.4s">
        Aliquam erat volutpat. Curabitur ut consequat arcu, eget
        laoreet est. Vivamus semper nibh sit amet libero hendrerit
        luctus. Fusce non bibendum lorem. Fusce laoreet risus eget
        tortor lobortis egestas. Etiam tempus quam sed felis viverra
        scelerisque. Integer fringilla libero risus, vel euismod turpis
        auctor ac. Proin elementum aliquet libero a dapibus. Mauris et
        tempor dolor.
      </p>
    </div>
  </div>

  <!-- features -->
  <div class="features" id="features">
    <div class="container">
      <div class="subject wow bounceInDown">features</div>
      <div class="icon wow bounceInDown" data-wow-delay="0.1s">
        <img src="./assets/images/cha.png" alt="">
      </div>
      <div class="photo">
        <div class="item wow bounceInDown" data-wow-delay="0.2s">
          <img src="./assets/images/img1.jpeg" alt="">
          <p class="desc">Born Identity: Bringing Burton Hardgoods to Life</p>
        </div>
        <div class="item wow bounceInDown" data-wow-delay="0.3s">
          <img src="./assets/images/img2.jpeg" alt="">
          <p class="desc">Jeremy Jones: On That Street Grind</p>
        </div>
        <div class="item wow bounceInDown" data-wow-delay="0.4s">
          <img src="./assets/images/img3.jpeg" alt="">
          <p class="desc">Burton’s Tokyo Rail Days Recap</p>
        </div>
        <div class="item wow bounceInDown" data-wow-delay="0.5s">
          <img src="./assets/images/img4.jpeg" alt="">
          <p class="desc">Burton’s Tokyo Rail Days Preview</p>
        </div>
      </div>
    </div>
  </div>

  <!-- contact -->
  <div class="contact" id="contact">
    <div class="container">
      <div class="top">
        <div class="item wow zoomIn">
          <div class="title wow bounceInDown">products</div>
          <div class="text">
            <p class="wow bounceInDown" data-wow-delay="0.2s">Mens</p>
            <p class="wow bounceInDown" data-wow-delay="0.3s">Womens</p>
            <p class="wow bounceInDown" data-wow-delay="0.4s">Youth</p>
          </div>
        </div>

        <div class="item wow zoomIn">
          <div class="title wow bounceInDown">about</div>
          <div class="text">
            <p class="wow bounceInDown" data-wow-delay="0.2s">Careers and Internships</p>
            <p class="wow bounceInDown" data-wow-delay="0.3s">Sponsorships</p>
            <p class="wow bounceInDown" data-wow-delay="0.4s">team</p>
            <p class="wow bounceInDown" data-wow-delay="0.5s">Catalog Request/Download</p>
          </div>
        </div>

        <div class="item wow zoomIn">
          <div class="title wow bounceInDown">coustomer support</div>
          <div class="text">
            <p class="wow bounceInDown" data-wow-delay="0.2s">Contact Us</p>
            <p class="wow bounceInDown" data-wow-delay="0.3s">Shipping and Order Tracking</p>
            <p class="wow bounceInDown" data-wow-delay="0.4s">Easy Returns</p>
            <p class="wow bounceInDown" data-wow-delay="0.5s">Warranty</p>
            <p class="wow bounceInDown" data-wow-delay="0.6s">Replacement Binding Parts</p>
          </div>
        </div>

        <div class="item wow zoomIn">
          <div class="title wow bounceInDown">newsletter</div>
          <div class="input-box wow bounceInDown" data-wow-delay="0.2s">
            <input type="text" placeholder="Enter your email">
            <div class="go-btn">
              <p>GO</p>
            </div>
          </div>
          <div class="icon-box">
            <div class="icons">
              <div class="icon wow bounceInDown" data-wow-delay="0.3s">
                <img src="./assets/images/f.png" alt="">
              </div>
              <div class="icon wow bounceInDown" data-wow-delay="0.4s">
                <img src="./assets/images/bird.png" alt="">
              </div>
              <div class="icon wow bounceInDown" data-wow-delay="0.5s">
                <img src="./assets/images/camera.png" alt="">
              </div>
              <div class="icon wow bounceInDown" data-wow-delay="0.6s">
                <img src="./assets/images/cir.png" alt="">
              </div>
            </div>
            <div class="tag wow bounceInDown" data-wow-delay="0.7s">
              You <span>Tabe</span>
            </div>
          </div>
        </div>
      </div>

      <div class="bottom">
        <div class="brand wow zoomIn">© 2014 Mountains Snowboards</div>
        <div class="city wow zoomIn" data-wow-delay="0.2s">
          <img src="./assets/images/usa.png" alt="">
          <p>Change Region</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

<!-- 引入jquery 因为使用bootstrap需要jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap的JS文件 -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入wow.js -->
<script src="./assets/js/wow.min.js"></script>
<script>
  // 初始化
  new WOW().init();
</script>

<!-- 引入less 将css解析为less-->
<script src="./assets/js/less.min.js"></script>